<template>
     <div>
        <van-nav-bar title="收藏" left-text="返回" left-arrow @click-left="onClickLeft" />
        </div>
    <div>
        <van-tabs v-model:active="arr[0].flag" sticky type="card" @click-tab.once="onClickTab">
            <van-tab  v-for="value in arr" :key="value.flag" :title="value.title">
                <!-- 店铺 -->
                <van-card v-if="value.flag === 0" v-for="v in list.shops" :key="v.shop_id" :desc="'地址:'+v.address" :title="v.shopname"
                    :thumb="getImg(v.pic)">
                    <template #tag>
                        <van-tag color="#f00">热销</van-tag>
                    </template>
                </van-card>
                <!-- 菜品 -->
                <van-card v-if="value.flag === 1" v-for="v in list.foods" :key="v.food_id" :price="v.price" :title="v.foodname"
                    :thumb="getImg(v.pic)">
                    <template #tag>
                        <van-tag color="#f00">热销</van-tag>
                    </template>
                </van-card>
            </van-tab>
        </van-tabs>
    </div>
</template>
  
  <script setup>
  import { ref, onMounted, reactive } from "vue";
  import { getCollectionApi } from "@/api";
  import { useRoute, useRouter } from "vue-router";
  import { useCounterStore } from "@/stores/counter";
  const getImg = e => `http://172.17.18.240:8080/nfood${e}`;
  const route = useRoute();
  const router = useRouter();
  const store = useCounterStore();
  const arr = reactive([{
          flag: 0,
          title: '店铺'
      },{
          flag: 1,
          title: '食品'
      }
  ]);
  const list = reactive({
      shops: [],
      foods: []
  });
  const onClickTab = e => {
      console.log(e.name);
      getCollection({
          userId: store.userId,
          flag: e.name
      }, e.name);
  };
  const getCollection = async (data,flag=0) => {
    const res = await getCollectionApi(data);
    if(flag === 0) {
      list.shops.push(...res);
      list.foods.splice(0);
    };
    if(flag === 1) {
      list.foods.push(...res);
    };
  };
  onMounted(() => {
      getCollection({
          userId: store.userId,
          flag: 0
      });
  });
  const onClickLeft = () => {
router.back()
};
  </script>
  
<style scoped>
:deep(.van-card__tag) {
  position: absolute;
  top: 1px;
  left: 2px;
}
.van-tag{
    font-size: 12px;
}
:deep(.van-card__thumb){

    width: 100px;
    height: 100px;
}
:deep(.van-card__title){
    font-size: 20px;
    line-height: 20px;
}
:deep(.van-card__desc){
    font-size: 16px;
    line-height: 16px;
}
</style>
  